<template>
	<view>
		{{ result }}
	</view>
</template>

<script>
	export default {
		name: "font-append",
		props: {
			content: {
				type: String,
				default: ''
			},
			isAnimation: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				result: '',
				timer: null,
				wordIndex: 0
			};
		},
		mounted() {
			if (this.isAnimation) {
				this.writing(this.content, 80)
			} else {
				this.result = this.content;
			}

		},
		methods: {
			writing(wordString, delay) {
				/*
				    打印文字
				    参数1：dom对象
				    参数2：需要打印的字符串
				    参数3：延时时长
				*/
				// wordIndex标记文字索引值，
				if (this.wordIndex < wordString.length) { // 如果索引值比文字长度小，继续执行代码
					clearTimeout(this.timer) // 为了保证每次时间间隔一致，需要清楚时间器
					// 向dom中追加文字，之后索引值+1
					this.result += wordString[this.wordIndex++]
					// 特殊的值才进行滚动
					if (this.wordIndex % 30 == 20) {
						this.$emit('scrollBtm')
					}
					// 定时器
					this.timer = setTimeout(() => {
						// 递归执行该函数
						this.writing(wordString, delay)
					}, delay)
				}
			},
		},
	}
</script>

<style lang="less">

</style>